<template>
    <!-- 人员管理-规则配置 -->
    <div class="empSetting">
        <div class="content">
            <div class="list">
                <h3>考勤设置</h3>
                <div class="search" style="align-items: center;">
                    <p>请选择您的考勤方式</p>
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">电子围栏考勤</el-radio>
                        <!-- <el-radio :label="2">闸机考勤</el-radio> -->
                    </el-radio-group>
                    <!-- <el-button type="primary" @click="sumbit" style="margin-left:50px;" size="small" plain :disabled="!btnList.includes('emp/rule/attendSet')">确定</el-button> -->
                </div>
            </div>
            <!-- <div class="list">
                <h3>实名制设置</h3>
                <div class="search">
                    <p>年龄设置</p>
                    <div class="list">
                        <div class="item">
                            <div>
                                <span>童工：童工年龄 &lt; </span>
                                <el-input-number v-model="childLabourAge" controls-position="right" :min="0"  :max="99" size="small" style="margin-left:10px;margin-right:10px"></el-input-number>
                                <span>周岁，禁止登记</span>
                            </div>
                        <el-switch v-model="childLabourAgeFlag" active-color="#13ce66" inactive-color="#999"></el-switch>
                    </div>
                    <div class="item">
                        <div>
                            <span>男工退休：男性年龄 > </span>
                            <el-input-number v-model="maleRetireAge" controls-position="right" :min="0" :max="99" size="small" style="margin-left:10px;margin-right:10px"></el-input-number>
                            <span>周岁，禁止登记</span>
                        </div>
                        <el-switch v-model="maleRetireAgeFlag" active-color="#13ce66" inactive-color="#999"></el-switch>
                    </div>
                    <div class="item">
                        <div>
                            <span>女工退休：女性年龄 ></span>
                            <el-input-number v-model="femaleRetireAge" controls-position="right" :min="0" :max="99" size="small" style="margin-left:10px;margin-right:10px"></el-input-number>
                            <span>周岁，禁止登记</span>
                        </div>
                        <el-switch v-model="femaleRetireAgeFlag" active-color="#13ce66" inactive-color="#999"></el-switch>
                    </div>
                    </div>
                </div>
                <div class="search" style="align-items: center;">
                    <p>黑名单设置</p>
                    <div class="list">
                        <div class="item">
                            <span >黑名单人员禁止进场</span>
                            <el-switch v-model="empBlackListFlag" active-color="#13ce66" inactive-color="#999"></el-switch>
                        </div>
                    </div>
                    <el-button type="primary" @click="sumbitSetting" style="margin-left:50px;" size="small" plain :disabled="!btnList.includes('emp/rule/realNameSet')">确定</el-button>
                </div>
            </div> -->
            <!-- <div class="list">
                <h3>录入记录</h3>
                <div class="search" style="align-items: center;">
                    <p>二维码录入</p>
                    <div class="list">
                        <div class="item">
                            <div>扫描二维码，手动录入人员进出记录</div>
                            <el-switch  v-model="qrFlag" active-color="#13ce66" inactive-color="#999" @change="getFlag"></el-switch>
                        </div>
                    </div>
                    <el-button type="primary" @click="downRWM(1)" style="margin-left:50px;"  size="small" plain :disabled="!btnList.includes('emp/rule/qrcode')">下载二维码</el-button>
                </div>
            </div> -->
            <div class="list">
                <h3>安全帽定位</h3>
                <div class="search" style="align-items: center;">
                    <p>地图显示</p>
                    <div class="list">
                        <div class="item1">
                            <span>安全帽离线或关机时长> =</span>
                            <el-input-number v-model="minutes" controls-position="right" :min="0" :max="99999" size="small" style="margin-left:10px;margin-right:10px"></el-input-number>
                            <span>分钟,地图上禁止显示</span>
                        </div>
                    </div>
                    <el-button type="primary" @click="sumbitTime" style="margin-left:50px;"  size="small" plain :disabled="!btnList.includes('emp/rule/helmetPosition')">确定</el-button>
                </div>
            </div>
            <!-- <div class="list">
                <h3>移动端实名制</h3>
                <div class="search" style="align-items: center;">
                    <p>二维码录入</p>
                    <div class="list">
                        <div class="item">
                            <div>扫描二维码，扫码录入人员实名制信息</div>
                            <el-switch  v-model="H5qrFlag" active-color="#13ce66" inactive-color="#999" @change="getH5Flag"></el-switch>
                        </div>
                    </div>
                    <el-button type="primary" @click="downRWM(2)" style="margin-left:50px;"  size="small" plain :disabled="!btnList.includes('emp/rule/mobileRealName')">下载二维码</el-button>
                </div>
            </div> -->
            <!-- <div class="list">
                <h3>实名制同步配置</h3>
                <div class="configList">
                    <el-button type="primary" size="small" style="margin-bottom: 10px;" @click="updateConfig('add')">新增配置</el-button>
                    <el-table :data="realNameConfigData" size="small">
                        <el-table-column label="推送平台" :show-overflow-tooltip="true" width="100px">
                            <template slot-scope="scope">{{scope.row.platform}}</template>
                        </el-table-column>
                        <el-table-column label="appId" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{scope.row.appId}}</template>
                        </el-table-column>
                        <el-table-column label="appSecret" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{scope.row.appSecret}}</template>
                        </el-table-column>
                        <el-table-column label="工地编码" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{scope.row.gdmCode}}</template>
                        </el-table-column>
                        <el-table-column label="推送地址" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{scope.row.pushUrl}}</template>
                        </el-table-column>
                        <el-table-column label="项目编码" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{scope.row.projectCode}}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="100px" align="center" >
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="updateConfig('edit', scope.row)">编辑</el-button>
                                <el-popconfirm title="确定要删除吗？" @confirm="delConfig(scope.row)">
                                    <el-button slot="reference" size="small" type="text">删除</el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div> -->
        </div>

        <Modal v-model="Modal" title="提示" width="360px;" :mask-closable="false">
            <div style="margin:10px">您是否确定选择此考勤方式？</div>
            <div slot="footer">
                <el-button @click="cancel(0)" type="info" size="small" plain>取消</el-button>
                <el-button @click="ok" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="setModal" title="提示" width="360px;" :mask-closable="false">
            <div style="margin:10px">您是否确定选择此实名制设置？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="okSet" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="rwmModal" title="二维码" width="360px;" :mask-closable="false" :footer-hide="true">
            <div class="rwm">
                <img :src="src" alt="">
               <el-button @click="downImg(1)" type="primary" size="small" plain v-preventReClick="1500">下载</el-button>
            </div>
        </Modal>
         <Modal v-model="empQrModal" title="二维码" width="360px;" :mask-closable="false" :footer-hide="true">
            <div class="rwm">
                <img :src="h5src" alt="">
               <el-button @click="downImg(2)" type="primary" size="small" plain v-preventReClick="1500">下载</el-button>
            </div>
        </Modal>

        <!-- 新增/编辑实名制同步配置 -->
        <el-dialog :title="updateTitle" :visible.sync="configVisible" width="800px">
            <el-form ref="configForm" :model="configForm" label-width="110px">
                <el-form-item label="推送平台：" prop="platform" :rules="[{ required: true, message: '请输入推送平台', trigger: 'blur' }]">
                    <el-input v-model="configForm.platform" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="appId：" prop="appId" :rules="[{ required: true, message: '请输入appId', trigger: 'blur' }]">
                    <el-input v-model="configForm.appId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="appSecret：" prop="appSecret" :rules="[{ required: true, message: '请输入appSecret', trigger: 'blur' }]">
                    <el-input v-model="configForm.appSecret" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工地编码：" prop="gdmCode" :rules="[{ required: true, message: '请输入工地编码', trigger: 'blur' }]">
                    <el-input v-model="configForm.gdmCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="推送地址：" prop="pushUrl" :rules="[{ required: true, message: '请输入推送地址', trigger: 'blur' }]">
                    <el-input v-model="configForm.pushUrl" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="configVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitConfig">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import { getEmpAttendTypeSet, getEmpAttendType,getEmpGetSetting,getEmpGetSettingAdd ,getEmpAttendQr,getempQr, realNameConfigList, addRealNameConfig, editRealNameConfig, delRealNameConfig } from "@/api/api.js";
export default {
    data() {
        return {
            deptId: "",
            radio: "",
            Modal: false,
            empBlackListFlag:false,
            childLabourAge:0,
            childLabourAgeFlag:false,
            maleRetireAge:0,
            maleRetireAgeFlag:false,
            femaleRetireAge:0,
            femaleRetireAgeFlag:false,
            setModal:false,
            qrFlag:false,
            src:'',
            rwmModal:false,
            qrEmpName:'二维码',
            minutes:0,
            H5qrFlag:false,//移动端实名制
            empQrModal:false,
            h5src:'',
            btnList:[],

            realNameConfigData: [],
            /* 同步配置弹窗 */
            dialogType: "add",
            configVisible: false,
            updateTitle: "新增配置",
            configForm: {}
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getType();
                this.getSetting();
            }
        },
    },
    methods: {
        getType() {
            let parmas = {
                deptId: this.deptId
            };
            getEmpAttendType(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.radio = res.data.type;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        sumbit() {
            if (this.radio == "") {
                this.$Modal.warning({
                    title: "提示",
                    content: "请选择考勤方式"
                });
                return;
            }
            this.Modal = true;
        },
        ok() {
            let parmas = {
                deptId: this.deptId,
                type: this.radio
            };
            getEmpAttendTypeSet(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.Modal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getFlag(val){
           let parmas ={
                deptId:this.deptId,
                qrFlag:val== true?1:0,
            }
            getEmpGetSettingAdd(parmas).then(res=>{
                if(res.code == 200 ){
                    this.$Message.success("操作成功");
                    this.getSetting();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },

        //移动端实名制
        getH5Flag(val){
            let parmas ={
                deptId:this.deptId,
                empQrFlag:val== true?1:0,
            }
            getEmpGetSettingAdd(parmas).then(res=>{
                if(res.code == 200 ){
                    this.$Message.success("操作成功");
                    this.getSetting();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        downRWM(type){
            if(type == 1){
                getEmpAttendQr(this.deptId).then(res=>{
                    if(res.code == 200) {
                        this.rwmModal = true;
                        this.src = res.data.path
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(res=>{
                    console.log(error)
                })
            }if(type == 2){ //移动端实名制打卡
                getempQr(this.deptId).then(res =>{
                    if(res.code == 200) {
                        this.empQrModal = true;
                        this.h5src = res.data.path
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(res=>{
                    console.log(error)
                })
            }

        },
        downImg(num){
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            let canvas = document.createElement("canvas");
            let name = this.qrEmpName;
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, 300, 300);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            if(num==1){
                image.src = this.src;
            }else{
                image.src = this.h5src;
            }
        },
        cancel(type) {
            if(type == 0){
                this.Modal = false;
            } else if(type == 1) {
                this.setModal = false;
            }
        },
        getSetting(){
            let parmas = {
                deptId:this.deptId,
            }
            getEmpGetSetting(parmas).then(res=>{
                if(res.code == 200) {
                   this.childLabourAge =res.data.childLabourAge || 0;
                   this.maleRetireAge =res.data.maleRetireAge || 0;
                   this.femaleRetireAge = res.data.femaleRetireAge || 0;
                   this.childLabourAgeFlag =res.data.childLabourAgeFlag == 1?true:false;
                   this.maleRetireAgeFlag =res.data.maleRetireAgeFlag == 1?true:false;
                   this.femaleRetireAgeFlag =res.data.femaleRetireAgeFlag == 1?true:false;
                   this.empBlackListFlag =res.data.empBlackListFlag == 1?true:false;
                   this.qrFlag =res.data.qrFlag == 1?true:false;
                   this.H5qrFlag = res.data.empQrFlag == 1?true:false;
                   this.minutes = res.data.minutes || 120;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        sumbitSetting(){
            this.setModal = true;
        },
        okSet(){
            let parmas ={
                deptId:this.deptId,
                childLabourAge:this.childLabourAge,
                childLabourAgeFlag:this.childLabourAgeFlag == true?1:0,
                maleRetireAge:this.maleRetireAge,
                maleRetireAgeFlag:this.maleRetireAgeFlag == true?1:0,
                femaleRetireAge:this.femaleRetireAge,
                femaleRetireAgeFlag:this.femaleRetireAgeFlag == true?1:0,
                empBlackListFlag:this.empBlackListFlag == true?1:0,
            }
            getEmpGetSettingAdd(parmas).then(res=>{
                if(res.code == 200 ){
                    this.$Message.success("操作成功");
                    this.setModal =false;
                    this.getSetting();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        sumbitTime(){
            let parmas ={
                deptId:this.deptId,
                minutes :this.minutes,
            }
            getEmpGetSettingAdd(parmas).then(res=>{
                if(res.code == 200 ){
                    this.$Message.success("操作成功");
                    this.getSetting();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },

        /* 实名制同步配置列表 */
        getRealNameConfigList(){
            let param = {
                deptId: this.deptId
            }
            realNameConfigList(param).then(res=>{
                this.realNameConfigData = res.data
            })
        },

        /* 新增/编辑配置 */
        updateConfig(type, values){
            this.configVisible = true
            this.configForm = {}
            this.dialogType = type
            if(type==="add"){
                this.updateTitle = "新增配置"
            }else{
                this.updateTitle = "编辑配置"
                this.configForm = values
            }
        },

        /* 提交配置 */
        submitConfig(){
            this.$refs.configForm.validate((valid) => {
                if (valid) {
                    let param = {
                        deptId: this.deptId,
                        platform: this.configForm.platform,
                        appId: this.configForm.appId,
                        appSecret: this.configForm.appSecret,
                        gdmCode: this.configForm.gdmCode,
                        pushUrl: this.configForm.pushUrl
                    }
                    if(this.dialogType === "add"){
                        addRealNameConfig(param).then(res=>{
                            if(res.code==200){
                                this.configVisible = false
                                this.$message.success("新增成功")
                                this.getRealNameConfigList()
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }else{
                        param.id = this.configForm.id
                        editRealNameConfig(param).then(res=>{
                            if(res.code==200){
                                this.configVisible = false
                                this.$message.success("编辑成功")
                                this.getRealNameConfigList()
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        },

        /* 删除配置 */
        delConfig(values){
            let param = {
                id: values.id
            }
            delRealNameConfig(param).then(res=>{
                this.$Message.success("删除成功")
                this.getRealNameConfigList()
            })
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getType();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getSetting();
        this.getRealNameConfigList()
    }
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
.empSetting {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .content{
        background-color: #fff;
        .list {
            width: 100%;
            background: #fff;
            border-radius: 5px;
            margin-bottom: 10px;
            h3 {
                width: 96%;
                margin: 0 auto;
                padding-top: 20px;
                color: #000;
                font-size: 16px;
            }
            .search {
                width: 90%;
                margin: 0 auto;
                padding-top: 20px;
                display: flex;
                justify-content: flex-start;
                //
                padding-bottom: 20px;
                p {
                    margin-right: 20px;
                    font-size: 14px;
                    width: 170px;
                }
                .list{
                    width: 600px;
                    .item{
                        width: 100%;
                        height: 40px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        span{
                            display: inline-block;
                            width: 150px;
                        }
                    }
                    .item1{
                         width: 100%;
                        height: 40px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }
                }
            }
            .configList{
                margin: 0 auto;
                padding: 20px 0;
                width: 90%;
            }
        }
    }
}
.rwm{
    width: 300px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
        width: 300px;
        height: 300px;
        margin-bottom: 10px;
    }
}
/deep/.ivu-input-group{
    border-radius:20px;
    }
    /deep/.ivu-input-group .ivu-input{
        border-radius: 20px 0 0 20px;
        border-color:#EBF2F8;
        background:#EBF2F8;
    }
    /deep/.ivu-input-group-append{
        border-radius: 0 20px 20px 0;
    }
    /deep/.el-tag.el-tag--success{
        background-color: #E7F8F2;
        border-color: #28D79C;
        color: #3FCF77;
    }
    /deep/.el-tag{
        border-radius: 2px;
    }
    /deep/.ivu-select-selection{
        border-radius: 2px;
    }
</style>
